<template>
  <div class="flex justify-between w-full mt-2 sm:mt-4 md:my-10 shadow-xl md:flex-row sm:flex-col-reverse mb-col-reverse"  >
    <div class="md:w-65% lg:w-68% xl:w-70% sm:w-full left-list mt-4 sm:mt-0" >
      <!-- 文章大版块 -->
      <div class="mb-4 sm:py-4 px-2 sm:px-6 md:px-8 bg-light-100 bg-opacity-90">
        <!-- v-loading="loading" element-loading-background="rgba(245, 245, 245,0.8)" -->
        <el-skeleton  :loading="skeletonLoading" animated>
        <!-- 骨架屏 -->
          <template #template>
            <!-- 文章头部 -->
            <div>
              <div class="w-30%">
                <span class="h1"><el-skeleton-item variant="h1" /></span>
              </div>
              <!-- 图标提示板块 -->
              <div class="info_count flex justify-end items-center ">
                <el-skeleton-item variant="h1" class="w-30%!"/>
            
              </div >
              <div class="h3 w-40%"><el-skeleton-item variant="h1" /></div>
            </div>
            
            <!-- 文章内容 -->
            <div class="h-40" v-loading="loading" element-loading-background="rgba(245, 245, 245,0.5)" >
              <el-skeleton-item variant="text" class="h-40!"/>
            </div>
            
            <el-skeleton-item variant="text" class="h-1!"/>
            <!-- 点赞按钮模块 -->
            <div class="flex justify-evenly items-center">
              <div class="ml-10 h-10 w-30">
                <el-skeleton-item variant="button" />
              </div>
              <div class="ml-10 h-10 w-30">
                <el-skeleton-item variant="button" />
              </div>
            
            </div>

          </template>
        <!-- 正文 -->
          <template #default>
            <!-- 文章头部 -->
            <div>
              <div>
                <span class="h1">{{topic?.title}}</span>
              </div>
              <!-- 图标提示板块 -->
              <div class="flex justify-between items-center py-2 px-4 mt-2 bg-gray-200" >
                <div >主题：<span class="text-sky-500">{{topic?.cate}}</span></div>
                <div class="info_count flex justify-end items-center ">
                  <div class="info_count_item">
                    <div class="i-carbon-view">浏览数</div>
                    <span>{{topic?.read}}</span>
              
                  </div>
                  <div class="info_count_item">
                    <div class="i-carbon-chat">评论数</div>
                    <span>{{topic?.comments}}</span>
                  </div>
                  <div class="info_count_item">
                    <div class="i-carbon-thumbs-up "> 点赞数</div>
                    <span>{{topic?.praise}}</span>
                  </div>
                  <div class="info_count_item">
                    <div class="i-carbon-star">收藏数</div>
                    <span>{{topic?.collected}}</span>
                  </div>
                </div>
              </div>
              <div class="h3 mt-2 text-center">文章发表：{{topic?.createdAt}}</div>
            </div>
            
            <!-- 文章内容 -->
            <div class="h2 " v-html="topic?.content"></div>
            
            <div class="border-b-4 my-8"></div>
            <!-- 点赞按钮模块 -->
            <div class="flex justify-evenly">
              <div class="info_count_item">
                <div :class="`${likingIcon} wh-10! opacity-80 cursor-pointer `" @click="addLiking"></div>
                <span>{{topic?.praise}}</span>
              </div>
              <div class="info_count_item">
                <div :class="`${collectionIcon} wh-10! opacity-80 cursor-pointer`" @click="addCollection"></div>
                <span>{{topic?.collected}}</span>
              </div>
            
            </div>
          </template>
        </el-skeleton>
        

      </div>
      
      <!-- 登录用户回复框大版块 -->
      <div ref="replyDom" class="my-4 px-4 sm:px-10 md:px-12 lg:px-16 py-4 flex flex-col bg-light-200 bg-opacity-90">
        <div class="h3">看帖是喜欢，评论才是真爱：</div>
        <SimpleEditor  :handleReload="handleReload" :picList="picList"></SimpleEditor>
      </div>

      <!-- 评论回复大版块 -->
      
      <Reply  :picList="picList"></Reply>
    </div >
    <div class="md:mt-0 md:w-35% lg:w-33% xl:w-30% sm:my-4 sm-w-full right-msg">
      <div class="user-msg sticky top-1rem">
        <div class=" flex flex-col justify-start items-center w-50%">
          <div class="user-avatar h-70% ">
            <RouterLink :to="`/accountCenter/postList/${topic?.user?._id}`">
              <img class="wh-full" :src="IMG_URL_SERVER +topic?.user?.avatar?.url" :alt="topic?.user?.avatar?.name"/>
            </RouterLink>
          </div>
          <div>
            <img class="h-4" :src="IMG_URL_SERVER +topic?.user?.level?.url" alt="">
          </div>
        </div>
        <div class="user-detail">
          <div class="nickname">
            <RouterLink :to="`/accountCenter/postList/${topic?.user?._id}`" >
              <span class="md:text-md lg:text-lg xl:text-xl leading-3 h-auto">{{topic?.user?.nickname}}</span>
            </RouterLink>
          </div>
          <div class="headline">{{topic?.user?.headline.substring(0,18)+'...'}}</div>
          <div>
            <button @click="following" class="btn mb-2 w-full" >{{followingState}}</button>
            <el-dialog
              v-model="centerDialogVisible"
              title="提示"
              width="30%"
              align-center
            >
              <span>确认要取消关注吗？</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取消</el-button>    
                  <el-button type="primary" @click="unFollowing">
                    确认
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { fetchTopic,fetchLikingTopic,fetchUnLikingTopic,fetchCollectingTopic,fetchUnCollectingTopic,fetchCollectingTopicList,fetchLikingTopicList,fetchAddRead,fetchAddFollowing,fetchUnFollowing,fetchExpressions } from "@/server";
import Reply from "./components/Reply.vue";
import { IMG_URL_SERVER } from "@/config"


//router
const route = useRoute()
const router = useRouter()
//reload 重载
const { reloadFlag,handleReload } = inject<any>('reload')
// 文章
const topic = ref()
//收藏按钮Icon
const collectionIcon = ref('i-carbon-star')
//点赞按钮Icon
const likingIcon = ref('i-carbon-thumbs-up')
//authStore登录用户数据
const authStore = useAuthStore()
const { user:auth } = storeToRefs(authStore)
//utilsStore
const utilsStore = useUtilsStore()
//弹出取消关注对话框
const centerDialogVisible = ref(false)
//关注状态
const followingState = ref('关注')
//replyDom
const replyDom = ref()
//图片列表
const picList:any = ref([])
//等待加载回复
const loading = ref(true)
//骨架屏渲染
const skeletonLoading = ref(true) //开关
//等待时间
const loadingTime = 500  



//关注别人
const following = ()=>{
  //保护条款
  if(!authStore.isAuthenticated){
    utilsStore.dialogTableVisible = true 
    return false;
  }
  if(followingState.value === '关注'){
    fetchAddFollowing(topic?.value?.user?._id).then(()=>{
      followingState.value = '已关注'
    })
  }else{
    centerDialogVisible.value = true
  }

}
//取消关注
const unFollowing = ()=>{
  //保护条款
  if(!authStore.isAuthenticated){
    utilsStore.dialogTableVisible = true 
    return false;
  }
  fetchUnFollowing(topic?.value?.user?._id).then(()=>{
      followingState.value = '关注'
  })
  centerDialogVisible.value = false
}



//点击收藏 
const addCollection = ()=>{
  //保护条款
  if(!authStore.isAuthenticated){
    utilsStore.dialogTableVisible = true 
    return false;
  }
  if(collectionIcon.value==='i-carbon-star'){
    collectionIcon.value = 'i-carbon-star-filled bg-sky-500'
    topic.value.collected++
    fetchCollectingTopic(route.params.id as string,()=>true)
  }else{
    collectionIcon.value ='i-carbon-star'
    topic.value.collected--
    fetchUnCollectingTopic(route.params.id as string,()=>true)
  }
  
}
//点击点赞
const addLiking = ()=>{
  //保护条款
  if(!authStore.isAuthenticated){
    utilsStore.dialogTableVisible = true 
    return false;
  }
  if(likingIcon.value==='i-carbon-thumbs-up'){
    likingIcon.value = 'i-carbon-thumbs-up-filled bg-sky-500'
    topic.value.praise++
    fetchLikingTopic(route.params.id as string,()=>true)
  }else{
    likingIcon.value = 'i-carbon-thumbs-up'
    topic.value.praise--
    fetchUnLikingTopic(route.params.id as string,()=>true)
  } 
}

//阅读量增加1
fetchAddRead(route.params.id as string,()=>true)





//更新时发送fetch
watchEffect(()=>{
  if(route.params.id && reloadFlag.value){
    //获取帖子
    fetchTopic(route.params.id as string, ()=>true).then(async (data)=>{  
      topic.value =  data
      const flag = data?.user?.fansList?.some((val:any)=>{
        return val === auth.value?._id
      })
      if(flag){
          followingState.value = '已关注'
      }else{
          followingState.value = '关注'
      }

      setTimeout(async () => {
        loading.value = false
        skeletonLoading.value = false
        
        await nextTick()
        if (route.hash === "#reply") {
          window.scrollTo(0, replyDom.value.getBoundingClientRect().top-100)
        }
      }, loadingTime)

      
      
      
    }).catch(err =>{
      if(err){
        router.replace("/404")
      }     
    })

    //获取点赞列表
    fetchLikingTopicList(()=>true).then((data)=>{
      const flag = data?.some(function(val:any){
        return val._id === route.params.id
      })
      if(flag){
        likingIcon.value = 'i-carbon-thumbs-up-filled bg-sky-500'
      }
    })

    //获取收藏列表
    fetchCollectingTopicList(()=>true).then((data)=>{
      const flag = data?.some(function(val:any){
        return val._id === route.params.id
      })
      if(flag){
        collectionIcon.value = 'i-carbon-star-filled bg-sky-500'
      }
    })

    //获取表情包
    fetchExpressions(()=>true).then((data)=>{
      picList.value = data
    })
    
    
    
  }

},{flush:'post'})

</script>

<style scoped lang="scss">
.info_count_item{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  >div{
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    opacity: 50%;
    
  }
  >span{
    opacity: 50%;
  }
}
.mb-col-reverse{
  @media screen and (max-width:640px){
    flex-direction: column-reverse;
    align-items: center;
  }
}
.left-list{
  @media screen and (max-width:640px){
    width: 95%;
    font-size: 0.95rem;

  }
  @media screen and (max-width:1024px) and (max-width:1280){
    font-size: 0.97rem;

  }
}
.right-msg{
  @media screen and (max-width:640px){
    width: 80%;
  }
}
.user-msg{
  display: flex;

  padding: 0.5rem 0.5rem;
  background-color: rgb(250,250,250,0.97);
  box-shadow: 1px 1px 3px rgba(182, 182, 182, 0.6),
  -1px -1px 3px rgba(182, 182, 182, 0.6);
  @media screen and (min-width:1024px) and (max-width:1280px) {
      padding: 0rem  ;
    
    }
  @media screen and (min-width:768px) and (max-width:960px) {
      padding: 0rem  ;
      .user-detail{
        flex-basis: 50%;
      }
    }
  @media screen and (min-width:640px) and (max-width:768px) {
    height: 120px;
  }
  @media screen and (max-width:640px) {
    height: 100px;
    padding: 0.25rem 0.5rem;
    margin-top: 1rem;
    div.flex{
      width: 40%;
      .user-avatar{
        height: 90%;
      }
    }
  
    .user-detail{
      
      flex-basis:60% !important;
      .nickname{
        font-size: 1.1rem !important;
        line-height: 1.4rem !important;

      }
      div:nth-of-type(3){
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0.6rem;
      }
      .btn{
        width: 40%;
        font-size: 0.8rem;
        vertical-align: center;
        min-width: 60px;
      }
    }
  }

  .user-avatar{
    overflow: hidden;
    padding: 0.5rem;
    img{
      border-radius: 50%;
    }
  }
  .user-detail{
    flex-basis: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .nickname{
      font-size: 1.2rem;
      font-weight:550;
      line-height: 1.6em;
    }
    .headline{
      font-size: 0.84rem;
      color: #bbb;
      line-height: 1.3em;
    }
    .follow{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      line-height: 1.9rem;
      margin-top: 0.5rem;
      border-radius: 5px;
      border: 0.5px solid #268bb9;
      transition: all 0.15s;
      cursor: pointer;
      &:hover{
        background-color:#268bb9 ;
        color: #fff;
      }
    }
  }
}

</style>

<route lang="yaml">
meta:
  layout: home
</route>
